<template>
  <view>

    <view class="page" :style="{height:screenHeight+'px'}">
      <view class="body" :style="{height:screenHeight+'px'}">
        <view class="block_1">
          <view class="text-wrapper_1">
            <text lines="1" class="text_2">合同设置</text>
            <text lines="1" class="text_3" @click="toggle('left')">预览合同</text>

          </view>
          <view class="box_3"></view>
          <view class="text-wrapper_2">
            <text lines="1" class="text_4">合同名称</text>
            <text lines="1" class="text_5">{{PDFname}}</text>
          </view>
          <view class="box_4"></view>
          <view class="box_5">
            <text lines="1" class="text_6">设置签章位置</text>
            <image src="../../static/kq.png" class="switch_1" v-show="location" @click="location=!location"></image>
            <image src="../../static/qx.png" class="switch_1" v-show="!location" @click="location=!location"></image>
          </view>
        </view>
        <view class="block_2" :style="{height:heigth}">
          <text lines="1" class="text_7">签约设置</text>
          <view class="box_6"></view>
          <view class="box_7">
            <view class="block_3"></view>
            <text lines="1" class="text_8">签署方</text>
            <text lines="1" class="text_9">顺序签</text>
            <image src="../../static/qx.png" class="switch_2" v-show="inOrder" @click="inOrders()"></image>
            <image src="../../static/kq.png" class="switch_2" v-show="!inOrder" @click="inOrders()"></image>
          </view>
          <view style="height: 400rpx;overflow-x:hidden;">
          <view class="box_8">

            <!-- 我的本人签署方 -->
            <view class="image-text_1">
              <view class="group_1"></view>
              <text lines="1" class="text-group_1">{{name}}</text>
            </view>

            <!-- 我的添加签署方 -->
            <view class="image-text_1" v-for="(item,index) in signatory" :key="item.id"
              @longpress="removeUser( index)">
              <view class="group_1"></view>
              <text lines="1" class="text-group_1">{{item.userName.substr(0,3)}}</text>
            </view>



            <view class="box_9">
              <view class="icon_2">
                <image src="../../static/++.png" class="text_10" @click="sign_3()"></image>
              </view>
              <text lines="1" class="text_11">添加</text>
            </view>

          </view>
        </view>
        </view>
        <view class="button_1" @click="signature()">
          <text class="text_12" @click="toNext()">下一步</text>
        </view>
        <!-- <view class="block_4"></view> -->
        <uni-popup ref="popup" background-color="#fff">
          <view class="">
            <view class="popup-content"
              style="width: 440rpx;overflow:auto;display: flex;flex-wrap: wrap;height: 1200rpx;"
              :class="{ 'popup-height': type === 'left' || type === 'right' }">
              <view class="box_w" v-for="(preview,index) in previewInfo.records" :key="preview.fileId"
                @click="toPDF(preview)">
                <image src="/static/file.png" style="width: 200rpx;height: 200rpx;"></image>
                <text
                  style="display: flex;justify-content: center;">{{preview.fileName.slice(0,4)}}{{preview.fileName.slice(4,5)?'..':''}}</text>
              </view>

            </view>
          </view>
        </uni-popup>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState,
    mapGetters
  } from "vuex"
  export default {
    data() {
      return {
        //签章位置
        location: true,
        //顺序签
        inOrder: true,
        //签署方
        signatory: [],
        //选择中的预览文件
        previewFile: {},
        self:{},//本人签署
        screenHeight: 0,//高度兼容适配
      }
    },
    onShow() {
      this.screenHeight = uni.getSystemInfoSync().windowHeight
      let signUserList = uni.getStorageSync('signUserList');
      if (!signUserList) {
        let dataList = []
        uni.setStorageSync('signUserList', dataList);
      } else {
        this.signatory = signUserList
      }
      this.signatory = signUserList
      //获取本地存储token信息用户
      const value = uni.getStorageSync("token");
      let param = {
        userId: value.userId,
        userName: value.userName,
        userType: value.userType
      }
      uni.setStorageSync('self', param);
      this.self=param
      // //在数组前面添加本人用户信息
      // this.signatory.unshift(param)
    },
    onLoad(e) {

    },
    mounted() {
      this.getPreviewInfo()
    },
    methods: {
      toNext() {
        if (this.previewFile.fileUrl) {
          uni.redirectTo({
            url: "/subpkg/sign-contract-seal/sign-contract-seal"
          })
        } else {
          let title = '选择文件'
          uni.$showMsg(title)
        }
      },
      toPDF(preview) {
        let name = preview.fileName.split('.')
        uni.showModal({
          title: '选择文件',
          content: name[0],
          success: (res) => {
            if (res.confirm) {
              let url = preview.fileUrl
              uni.navigateTo({
                url: `/subpkg/pdf/pdf?url=${url}`
              })
              this.previewFile = preview
              uni.setStorageSync('previewFile', preview)
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      },
      toggle(type) {
        this.type = type
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup.open(type)
      },
      //颠倒顺序
      inOrders() {
        this.inOrder = !this.inOrder

        this.signatory = this.signatory.reverse()
        uni.setStorageSync('signUserList', this.signatory);
      },
      signature() {
        uni.navigateTo({

        })
      },
      sign_3() {
        uni.navigateTo({
          url: '../signatory/signatory'
        })
      },
      removeUser(index){
        
        uni.showModal({
          title: '提示',
          content: '是否删除',
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定');
              this.signatory.splice(index, 1) //删除
              uni.setStorageSync('signUserList', this.signatory); //存储

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      getPreviewInfo() {
        this.$store.dispatch('contract/getPreviewFileInfo')
      }
    },
    computed: {
      ...mapState({
        previewInfo: state => state.contract.previewInfo,
      }),
      //动态设置高度
      heigth() {
        let index = this.signatory.length
        let num = parseInt(index+1 / 6)
        return 480  + 'rpx'
      },
      //计算出本人名字
      name(){
        if(!this.self.userName) return
        return this.self.userName.substr(0,3)
      },
      //计算出合同名字
      PDFname(){
        if(!this.previewFile.fileName) return
        return this.previewFile.fileName.substr(0,4)
      }
    }
  }
</script>

<style scoped>
  .box_w {
    padding: 10rpx;
    margin: 20rpx 0rpx;
    width: 200rpx;
    height: 200rpx;
  }

  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    /* height: 1478rpx; */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .body {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 750rpx;
    /* height: 1478rpx; */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .block_1 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 10rpx;
    width: 690rpx;
    height: 260rpx;
    border: 2px solid rgba(255, 252, 250, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-center;
    margin: 30rpx 0 0 32rpx;
  }

  .text-wrapper_1 {
    width: 625rpx;
    height: 27rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 52rpx 0 0 34rpx;
  }

  .text_2 {
    width: 110rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(27, 27, 27, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .text_3 {
    width: 92rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(200, 165, 86, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: right;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 3rpx;
  }

  .box_3 {
    width: 630rpx;
    height: 2rpx;
    display: flex;
    background-color: #F2F2F2;
    flex-direction: column;
    position: absolute;
    margin-top: 118rpx;
    margin-left: 30rpx;
  }

  .text-wrapper_2 {
    width: 621rpx;
    height: 23rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 36rpx 0 0 37rpx;
  }

  .text_4 {
    width: 95rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .text_5 {
    width: 75rpx;
    height: 19rpx;
    margin-right: 20rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 2rpx;
  }

  .box_4 {
    width: 630rpx;
    height: 2rpx;
    display: flex;
    background-color: #F2F2F2;
    flex-direction: column;
    position: absolute;
    margin-top: 178rpx;
    margin-left: 30rpx;
  }

  .box_5 {
    width: 621rpx;
    height: 33rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 37rpx 0 52rpx 37rpx;
  }

  .text_6 {
    width: 142rpx;
    height: 24rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .switch_1 {
    width: 66rpx;
    height: 33rpx;
    margin-top: 23rpx;
  }

  .block_2 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 10rpx;
    width: 690rpx;
    /* height: 500rpx; */
    border: 2px solid rgba(255, 252, 250, 1);
    display: flex;
    flex-direction: column;
    margin: 33rpx 0 0 32rpx;
  }

  .text_7 {
    width: 110rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(27, 27, 27, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin: 27rpx 0 30rpx 34rpx;
  }

  .box_6 {
    background-color: #F2F2F2;
    width: 630rpx;
    height: 2rpx;
    display: flex;
    flex-direction: column;
    /* margin: 9rpx 0 0 30rpx; */
    position: absolute;
    margin-top: 90rpx;
    margin-left: 30rpx;
  }

  .box_7 {
    width: 630rpx;
    height: 33rpx;
    flex-direction: row;
    display: flex;
    margin: 18rpx 0 0 28rpx;
  }

  .block_3 {
    background-color: rgba(200, 165, 86, 1.000000);
    border-radius: 50%;
    width: 12rpx;
    height: 12rpx;
    margin-top: 26rpx;
    display: flex;
    flex-direction: column;
  }

  .text_8 {
    width: 70rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin: 0rpx 0 0 10rpx;
  }

  .text_9 {
    width: 53rpx;
    height: 18rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin: 0rpx 0 0 403rpx;
  }

  .switch_2 {
    width: 66rpx;
    height: 33rpx;
    margin-left: 16rpx;
    margin-top: 18rpx;
  }

  .box_8 {
    width: 630rpx;
    height: 96rpx;
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: row; */
    /* justify-content: space-between; */
    /* margin: 31rpx 0 157rpx 51rpx; */
    margin-top: 51rpx;
    margin-left: 51rpx;
    
  }

  .image-text_1 {
    width: 64rpx;
    height: 96rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 40rpx;
    margin-bottom: 60rpx;
  }

  .group_1 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 50%;
    width: 64rpx;
    height: 64rpx;
    border: 1px solid rgba(200, 165, 86, 1);
    display: flex;
    flex-direction: column;
  }

  .text-group_1 {
    width: 34rpx;
    height: 18rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin: 14rpx 0 0 15rpx;
  }

  .box_9 {
    width: 64rpx;
    height: 96rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .icon_2 {
    border-radius: 50%;
    height: 64rpx;
    border: 1px solid rgba(200, 165, 86, 1);
    display: flex;
    flex-direction: column;
    width: 64rpx;
  }

  .text_10 {
    width: 32rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(200, 165, 86, 1.000000);
    font-size: 54rpx;
    line-height: 54.21rpx;
    margin-top: 25%;
    margin-left: 25%;
  }

  .text_11 {
    width: 35rpx;
    height: 18rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin: 14rpx 0 0 14rpx;
  }

  .button_1 {
    background-color: rgba(205, 173, 102, 1.000000);
    border-radius: 30rpx;
    height: 60rpx;
    display: flex;
    flex-direction: column;
    width: 400rpx;
    margin: 98rpx 0 0 176rpx;
  }

  .text_12 {
    width: 88rpx;
    height: 27rpx;
    webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30rpx;
    font-family: SimHei;
    text-align: center;
    white-space: nowrap;
    line-height: 30rpx;
    margin: 17rpx 0 0 156rpx;
  }

  .block_4 {
    background-color: rgba(242, 242, 242, 1.000000);
    border-radius: 1rpx;
    width: 2rpx;
    height: 70rpx;
    display: flex;
    flex-direction: column;
    margin: 226rpx 0 13rpx 374rpx;
  }
</style>
